<template>
  <div class="app">
      <!--头部-->
      <header id="header" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">豆瓣电影</h1>
		  </header>
			<!-- 返回按钮 -->
			<div class="back" v-if="isShow">
				<a @click="getBack()">返回</a>
			</div>

      <!--路由占位符-->
			<router-view></router-view>


      <!--底部-->
			<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/subjects">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">正在热映</span>
			</router-link>
			<router-link class="mui-tab-item" to="/coming">
				<span class="mui-icon mui-icon-extra mui-icon-extra-outline"></span>
				<span class="mui-tab-label">即将上映</span>
			</router-link>
			<router-link class="mui-tab-item" to="/top250">
				<span class="mui-icon mui-icon-extra mui-icon-extra-like"></span>
				<span class="mui-tab-label">Top250</span>
			</router-link>
			<router-link class="mui-tab-item" to="/like">
				<span class="mui-icon mui-icon-extra mui-icon-extra-heart-filled">
					<span ref="badge" id="badge" class="mui-badge">0</span>
				</span>
				</span>
				<span class="mui-tab-label">喜欢</span>
			</router-link>
		</nav>
  </div>
</template>

<script>

	var count = 0;
	import {vm,KEY} from './components/common/likeparams.js';

	vm.$on(KEY,function(input){
		// 将input数据叠加到count 
		count+=input;

		// 将count设置到span中
		document.getElementById('badge').innerText=count;
	});


export default {
  data(){
    return {
			isShow:false,
    }
  },
	watch:{
		'$route':function(newVal,oldVal){
				if(newVal.path.toLowerCase() == '/subjects' || newVal.path.toLowerCase() == '/like'|| newVal.path.toLowerCase() == '/coming' || newVal.path.toLowerCase() == '/top250'){
						this.isShow = false;
				}else {
					this.isShow = true;
				}
		}
	},
	methods:{
		getBack(){
			this.$router.go(-1)
		}
	}
}
</script>

<style>
			.back a{
				font-size: 16px;
				color: #000;
				font-weight:bold;
			}.back{
				position: fixed;
				top:10px;
				left:10px;
				z-index: 50;
			}


      html,
			body {
				background-color: #efeff4;
			}
			.mui-bar .mui-pull-left .mui-icon {
				padding-right: 5px;
				font-size: 28px;
			}
			.mui-bar .mui-btn {
				font-weight: normal;
				font-size: 17px;
			}
			.mui-bar .mui-btn-link {
				top: 1px;
			}
			.mui-bar-nav.mui-bar .mui-icon::before{
				content: '';
			}
</style>
